import React, { useRef, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import Style from './ShoppingCar.module.scss'
import { Button, Checkbox, ResultPage, SwipeAction } from 'antd-mobile'
import { Action, SwipeActionRef } from 'antd-mobile/es/components/swipe-action'
import { useSelector } from 'react-redux'

const rightActions: Action[] = [
  {
    key: 'delete',
    text: '删除',
    color: 'danger',
  },
]

const swiperInfo = [
  {
    url: '	https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
    title: '【加大加厚款】 厨房除油污清洁湿巾',
    detail: '【加大加厚】3包/提',
    currentPrice: 24.9,
    originPrice: 27.9,
  }, {
    url: '	https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
    title: '【加大加厚款】 厨房除油污清洁湿巾',
    detail: '【加大加厚】3包/提',
    currentPrice: 24.9,
    originPrice: 27.9,
  }, {
    url: '	https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
    title: '【加大加厚款】 厨房除油污清洁湿巾',
    detail: '【加大加厚】3包/提',
    currentPrice: 24.9,
    originPrice: 27.9,
  }, {
    url: '	https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
    title: '【加大加厚款】 厨房除油污清洁湿巾',
    detail: '【加大加厚】3包/提',
    currentPrice: 24.9,
    originPrice: 27.9,
  }

]

const ShoppingCar = () => {
  const checkRef = useRef<any>();
  // const items = useSelector((state:any)=>{
  //   return state.shopping
  // })
  const items = [
    {
      id: '001',
      src: 'https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
      name: '【加大加厚款】 厨房除油污清洁湿巾',
      details: '【加大加厚】3包/提',
      price: 149,
      num: 1,
    },
    {
      id: '002',
      src: 'https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
      name: '【加大加厚款】 厨房除油污清洁湿巾',
      details: '【加大加厚】3包/提',
      price: 149,
      num: 2,
    },
    {
      id: '003',
      src: 'https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
      name: '【加大加厚款】 厨房除油污清洁湿巾',
      details: '【加大加厚】3包/提',
      price: 149,
      num: 1,
    }, {
      id: '004',
      src: 'https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
      name: '【加大加厚款】 厨房除油污清洁湿巾',
      details: '【加大加厚】3包/提',
      price: 149,
      num: 1,
    }, {
      id: '005',
      src: 'https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146',
      name: '【加大加厚款】 厨房除油污清洁湿巾',
      details: '【加大加厚】3包/提',
      price: 149,
      num: 1,
    },
  ]

  const [item, setItem] = useState(items)
  const [checkedList, setCheckedList] = useState([])
  const [allPrice, setAllPrice] = useState(0)
  const chanegPrice = (price: number, num: number, check: boolean) => {
    if (check === true) {
      setAllPrice(allPrice + price * num)
    } else {
      setAllPrice(allPrice - price * num)
    }
  }

  const changeItem = (id: any) => {
    setItem(item.filter(val => val.id != id))
  }
  let all = 0;
  const allId: any = []
  for (let i = 0; i < item.length; i++) {
    all += item[i].price * item[i].num;
    allId[i] = (item[i].id.toString())
  }

  const quanxuan = (check: boolean) => {
    if (check === true) {
      setAllPrice(all)
    } else {
      setAllPrice(0)
    }
  }

  return (
    <div className={Style.all}>
      {
        item.length !== 0 ? <div className={Style.wrapper}>
          <div className={Style.shang}>
            <div className='top' style={{ marginBottom: '20px' }}>
              <div style={{ background: 'white', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                <span style={{ fontSize: '18px', fontWeight: 'bold' }}>全场换购</span>
                <p style={{ color: 'gray' }}>已满0.01元，可选择10件商品换购<span style={{ color: 'red', paddingLeft: '5px' }}>去换购&gt;</span></p>
              </div>
              <Swiper
                spaceBetween={50}
                slidesPerView={2}
              >
                {
                  !!swiperInfo.length && swiperInfo.map((val: any, key) => {
                    return <SwiperSlide key={key}>
                      <div className={Style.swiper}>
                        <div className="img">
                          <img style={{ height: '80px' }} src='https://yanxuan-item.nosdn.127.net/8189f81baf9a7f468078c52f0dbe0cf9.png?imageView&quality=35&thumbnail=146x146' alt="" />
                        </div>
                        <div className={Style.detail}>
                          <p className={Style.head}>【加大加厚款】 厨房除油污清洁湿巾</p>
                          <p className={Style.miaoshu}>【加大加厚】3包/提</p>
                          <p style={{ color: 'red' }}><span>换购价</span><span style={{ fontSize: '16px', fontWeight: 'bold' }}>￥24.9</span><del style={{ fontSize: '12px', color: '#ccc' }}>￥27.9</del></p>
                        </div>
                      </div>
                    </SwiperSlide>
                  })
                }
              </Swiper>
            </div>
            <div className={Style.center}>
              <Checkbox.Group value={checkedList} onChange={(e: any) => {
                console.log(e); setCheckedList(e); if (item.length === e.length) {
                  checkRef.current.check(true)
                } else {
                  checkRef.current.uncheck(true)
                }
              }}>
                {
                  !!item.length && item.map((val: any) => {
                    return <Checkbox block key={val.id} value={val.id} onChange={(e) => { chanegPrice(val.price, val.num, e) }}>
                      {/* 111 */}
                      <SwipeAction rightActions={rightActions} onAction={() => { changeItem(val.id) }}>
                        <div className={Style.swipeaction}>
                          <div className="left">
                            <img style={{ height: '100px' }} src={val.src} alt="" />
                          </div>
                          <div className={Style.right}>
                            <p style={{ color: 'black' }}>{val.name}</p>
                            <p style={{ color: 'gray', background: '#F4F4F4', borderRadius: '5px', fontWeight: 'normal' }}>{val.details}</p>
                            <div className={Style.price}>
                              <p style={{ color: 'red' }}>￥<span>{val.price}</span></p>
                            </div>
                          </div>
                          <button>x{val.num}</button>
                        </div>
                      </SwipeAction>
                    </Checkbox>
                  })
                }
              </Checkbox.Group>
            </div>
          </div>
          <div className={Style.xia}>
            <Checkbox ref={checkRef} block onChange={(e) => { quanxuan(e); if (e) { setCheckedList(allId) } else { setCheckedList([]) } }}>
              全选
            </Checkbox>
            <div className={Style.all}>
              <div className={Style.right}>
                <p style={{ color: 'red' }}>合计:￥{allPrice}</p>
                <button>结算({checkedList.length})</button>
              </div>
            </div>
          </div>
        </div> : <ResultPage
          status='waiting'
          title='空空如也'
          description='您还没有给购物车添加任何物品'
        />
      }
    </div>
  )
}

export default ShoppingCar